<template>
    <div class="loading_svg">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
           width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
          <rect x="0" y="10" width="4" height="10" fill="#333" opacity="0.2">
            <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite" />
            <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite" />
            <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite" />
          </rect>
          <rect x="8" y="10" width="4" height="10" fill="#333"  opacity="0.2">
            <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
            <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
            <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
          </rect>
          <rect x="16" y="10" width="4" height="10" fill="#333"  opacity="0.2">
            <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
            <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
            <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
          </rect>
        </svg>
        <!--<svg class="heart-loader" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 90 90" version="1.1">-->
            <!--<g class="heart-loader__group">-->
                <!--<path class="heart-loader__square" stroke-width="0.1" fill="none" d="M0,30 0,90 60,90 60,30z"/>-->
                <!--<path class="heart-loader__circle m&#45;&#45;left" stroke-width="0.1" fill="none" d="M60,60 a30,30 0 0,1 -60,0 a30,30 0 0,1 60,0"/>-->
                <!--<path class="heart-loader__circle m&#45;&#45;right" stroke-width="0.1" fill="none" d="M60,60 a30,30 0 0,1 -60,0 a30,30 0 0,1 60,0"/>-->
                <!--<path class="heart-loader__heartPath" stroke-width="0.2" d="M60,30 a30,30 0 0,1 0,60 L0,90 0,30 a30,30 0 0,1 60,0" />-->
            <!--</g>-->
        <!--</svg>-->
    </div>
</template>
<script>
  export default {
    data() {
      return {}
    },
    methods: {},
    mounted() {

    }
  }
</script>
<style scoped lang="less">
    .loading_svg svg {
        stroke: #ea5a49 !important;
        path, rect {
            fill: #FF6700;
        }
    }
</style>
<!--<style lang="sass" scoped>-->
    <!--*, *:before, *:after {-->
        <!--box-sizing: border-box;-->
        <!--margin: 0;-->
        <!--padding: 0;-->
    <!--}-->

    <!--$strokeColor: #B8B8B8;-->
    <!--$heartColor: #E21737;-->
    <!--$size: 180px; // change this to manipulate overall size-->
    <!--$totalAnim: 7s;-->
    <!--$delay: 1s;-->
    <!--$squareLen: 240;-->
    <!--$circleLen: 188.522;-->
    <!--$heartLen: 308.522;-->
    <!--$svgSize: 90px;-->
    <!--$circleW: 60px;-->

    <!--.heart-loader {-->
        <!--position: absolute;-->
        <!--display: block;-->
        <!--left: 50%;-->
        <!--top: 50%;-->
        <!--margin-top: $size/-2;-->
        <!--width: $size;-->
        <!--height: $size;-->
        <!--overflow: visible;-->

        <!--&__group {-->
            <!--transform-origin: 0 $svgSize;-->
            <!--animation: group-anim $totalAnim $delay infinite;-->
        <!--}-->

        <!--&__square {-->
            <!--stroke: $strokeColor;-->
            <!--stroke-dasharray: $squareLen, $squareLen;-->
            <!--stroke-dashoffset: $squareLen;-->
            <!--animation: square-anim $totalAnim $delay infinite;-->
        <!--}-->

        <!--&__circle {-->
            <!--stroke: $strokeColor;-->
            <!--stroke-dasharray: $circleLen, $circleLen;-->
            <!--stroke-dashoffset: $circleLen;-->
            <!--transform-origin: $circleW $circleW/2;-->

            <!--&.m&#45;&#45;left {-->
                <!--animation: left-circle-anim $totalAnim $delay infinite;-->
            <!--}-->

            <!--&.m&#45;&#45;right {-->
                <!--animation: right-circle-anim $totalAnim $delay infinite;-->
            <!--}-->
        <!--}-->

        <!--&__heartPath {-->
            <!--stroke: $heartColor;-->
            <!--fill: transparent;-->
            <!--stroke-dasharray: $heartLen, $heartLen;-->
            <!--stroke-dashoffset: $heartLen;-->
            <!--animation: heart-anim $totalAnim $delay infinite;-->
        <!--}-->
    <!--}-->
    <!--@keyframes square-anim {-->
        <!--12% {-->
            <!--stroke-dashoffset: 0;-->
        <!--}-->
        <!--43% {-->
            <!--stroke-dashoffset: 0;-->
            <!--opacity: 1;-->
        <!--}-->
        <!--85% {-->
            <!--stroke-dashoffset: 0;-->
            <!--opacity: 0;-->
        <!--}-->
        <!--100% {-->
            <!--stroke-dashoffset: 0;-->
            <!--opacity: 0;-->
        <!--}-->
    <!--}-->
    <!--@keyframes left-circle-anim {-->
        <!--12% {-->
            <!--stroke-dashoffset: $circleLen;-->
        <!--}-->
        <!--31% {-->
            <!--stroke-dashoffset: 0;-->
            <!--transform: translateY(0);-->
        <!--}-->
        <!--41% {-->
            <!--stroke-dashoffset: 0;-->
            <!--transform: translateY($circleW/-2);-->
        <!--}-->
        <!--43% {-->
            <!--stroke-dashoffset: 0;-->
            <!--transform: translateY($circleW/-2);-->
            <!--opacity: 1;-->
        <!--}-->
        <!--85% {-->
            <!--stroke-dashoffset: 0;-->
            <!--transform: translateY($circleW/-2);-->
            <!--opacity: 0;-->
        <!--}-->
        <!--100% {-->
            <!--stroke-dashoffset: 0;-->
            <!--transform: translateY($circleW/-2);-->
            <!--opacity: 0;-->
        <!--}-->
    <!--}-->
    <!--@keyframes right-circle-anim {-->
        <!--12% {-->
            <!--stroke-dashoffset: $circleLen;-->
        <!--}-->
        <!--31% {-->
            <!--stroke-dashoffset: 0;-->
            <!--transform: translateX(0);-->
        <!--}-->
        <!--41% {-->
            <!--stroke-dashoffset: 0;-->
            <!--transform: translateX($circleW/2);-->
        <!--}-->
        <!--43% {-->
            <!--stroke-dashoffset: 0;-->
            <!--transform: translateX($circleW/2);-->
            <!--opacity: 1;-->
        <!--}-->
        <!--85% {-->
            <!--stroke-dashoffset: 0;-->
            <!--transform: translateX($circleW/2);-->
            <!--opacity: 0;-->
        <!--}-->
        <!--100% {-->
            <!--stroke-dashoffset: 0;-->
            <!--transform: translateX($circleW/2);-->
            <!--opacity: 0;-->
        <!--}-->
    <!--}-->
    <!--@keyframes group-anim {-->
        <!--43% {-->
            <!--transform: rotate(0);-->
        <!--}-->
        <!--54% {-->
            <!--transform: rotate(-45deg);-->
        <!--}-->
        <!--90% {-->
            <!--transform: rotate(-45deg);-->
            <!--opacity: 1;-->
        <!--}-->
        <!--97% {-->
            <!--transform: rotate(-45deg);-->
            <!--opacity: 0;-->
        <!--}-->
        <!--100% {-->
            <!--transform: rotate(-45deg);-->
            <!--opacity: 0;-->
        <!--}-->
    <!--}-->
    <!--@keyframes heart-anim {-->
        <!--55% {-->
            <!--stroke-dashoffset: $heartLen;-->
            <!--fill: transparent;-->
        <!--}-->
        <!--70% {-->
            <!--stroke-dashoffset: 0;-->
            <!--fill: transparent;-->
        <!--}-->
        <!--87% {-->
            <!--stroke-dashoffset: 0;-->
            <!--fill: $heartColor;-->
        <!--}-->
        <!--100% {-->
            <!--stroke-dashoffset: 0;-->
            <!--fill: $heartColor;-->
        <!--}-->
    <!--}-->

    <!--.other {-->
        <!--position: absolute;-->
        <!--left: 0;-->
        <!--bottom: 0.5rem;-->
        <!--width: 100%;-->
        <!--text-align: right;-->

        <!--&__link {-->
            <!--font-size: 1.3rem;-->
            <!--margin: 0 1rem;-->
        <!--}-->
    <!--}-->
<!--</style>-->